<template>
  <div class="vipShop">
    <div class="vipShop_header">
      <div class="vipShop_header_container">
        <div class="container_logo" @click="isBtnShow = 1"></div>
        <div class="container_title">商城</div>
        <div class="container_img" @click="toHome"></div>
        <div class="container_txet" @click="toHome">主站</div>
        <div class="vipShop_header_wrap" v-if="isBtnShow === 1">
          <div class="container_wrap">
            <input
              type="text"
              placeholder="活动、嘉宾、场馆"
              class="container_input"
            />
            <div class="iconfont icon-search"></div>
          </div>
          <div class="container_login">
            <a class="regiast">注册</a>
            <span class="middle_line"></span>
            <a class="login">登录</a>
          </div>
          <div class="container_order">
            <div class="order_icon"></div>
            <div class="order_text">订单中心</div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="showhome_switch_container"
      v-if="isBtnShow === 1 || isBtnShow === 2"
    >
      <div class="switch_container">
        <div
          class="swicth_btn_left"
          :class="isBtnShow === 1 ? '' : 'swicth_active'"
          @click="switchShow"
        >
          漫展演出
        </div>
        <div
          class="swicth_btn_right"
          :class="isBtnShow === 2 ? '' : 'swicth_active'"
          @click="switchPeriphery"
        >
          B站周边
        </div>
      </div>
    </div>
    <VipShopShow v-if="isBtnShow === 1" @setIsBtnShow="setIsBtnShow" />
    <VipShopPeriphery v-else-if="isBtnShow === 2" />
    <VipShopDetails v-else :detailId="detailId" />
    <div class="vipShop_footer">
      <div class="footer_line"></div>
      <div class="footer_container">
        <ul class="footer_container_ul">
          <li class="footer_ul_childone">
            <div class="footer_li_title">bilibili</div>
            <div><a href="javascript:;">关于我们</a></div>
            <div><a href="javascript:;">友情链接</a></div>
            <div><a href="javascript:;">哔哩哔哩周边</a></div>
            <div><a href="javascript:;">官方认证</a></div>
            <div><a href="javascript:;">购买须知</a></div>
            <div><a href="javascript:;">客服中心</a></div>
            <div><a href="javascript:;">联系我们</a></div>
            <div><a href="javascript:;">加入我们</a></div>
          </li>
          <li class="footer_ul_childtwo">
            <div class="footer_li_title">传送门</div>
            <div><a href="javascript:;">帮助中心</a></div>
            <div><a href="javascript:;">高级弹幕</a></div>
            <div><a href="javascript:;">活动专题页</a></div>
            <div><a href="javascript:;">侵权申诉</a></div>
            <div><a href="javascript:;">活动中心</a></div>
          </li>
          <li class="footer_ul_childthree">
            <div class="li_div_img">
              <div>
                <a href="javascript:;">
                  <div class="footer_li_imgone"></div>
                  <em>手机端下载</em>
                </a>
              </div>
              <div>
                <a href="javascript:;">
                  <div class="footer_li_imgtwo"></div>
                  <em>新浪微博</em>
                </a>
              </div>
              <div>
                <a href="javascript:;">
                  <div class="footer_li_imgthree"></div>
                  <em>官方微信</em>
                </a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import VipShopShow from "./components/VipShopShow.vue";
import VipShopPeriphery from "./components/VipShopPeriphery.vue";
import VipShopDetails from "./components/VipShopDetails.vue";

export default {
  name: "BiliVipShop",
  data() {
    return {
      isBtnShow: 1,
      detailId: 0,
    };
  },
  components: {
    VipShopShow,
    VipShopPeriphery,
    VipShopDetails,
  },
  methods: {
    // 去首页
    toHome() {
      this.$router.push({
        name: "home",
      });
    },

    // 按钮切换
    switchShow() {
      this.isBtnShow = 1;
    },
    switchPeriphery() {
      this.isBtnShow = 2;
    },
    // 自组件点击触发
    setIsBtnShow(detailId) {
      this.detailId = detailId;
      this.isBtnShow = 3;
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

::v-deep .el-pagination--small {
  width: 200px;
  margin: 0 auto;
  margin-top: 20px;
}
::v-deep .el-pagination--small,
.btn-prev,
.el-pager,
.btn-next {
  background-color: #f4f5f7;
}
.vipShop {
  background-color: #f4f5f7;
}
.vipShop_header {
  background-color: #fff;
  position: absolute;
  top: 0;
  width: 100%;
  height: 60px;
  box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.vipShop_header_container {
  margin: 0 auto;
  width: 1160px;
  height: 100%;
  // border: 1px solid black;
  display: flex;
  align-items: center;
}
.vipShop_header_wrap {
  display: flex;
  align-items: center;
}
.container_logo {
  background-image: url("./img/vipShop.png");
  width: 91px;
  height: 20px;
  background-size: 100% 100%;
  cursor: pointer;
}
.container_img {
  width: 18px;
  height: 18px;
  margin-left: 40px;
  margin-right: 6px;
  background-size: 100% 100%;
  background-image: url(./img/zhuzhan.png);
  cursor: pointer;
}
.container_title {
  font-size: 14px;
  padding-left: 3px;
}
.container_txet {
  font-size: 14px;
  color: #636c7b;
  line-height: 14px;
  width: 60px;
  cursor: pointer;
}
.container_wrap {
  display: flex;
  align-items: center;
  position: relative;
}
.container_input {
  margin-left: 289px;
  font-size: 12px;
  color: #6d757a;
  width: 360px;
  height: 40px;
  border: none;
  border-radius: 40px;
  padding-left: 20px;
  background-color: #f1f3f5;
}
.icon-search {
  background-image: url("./img/search.png");
  width: 18px;
  height: 18px;
  background-size: 100%;
  position: absolute;
  right: 4px;
  cursor: pointer;
}
.container_login {
  width: 90px;
  margin-left: 38px;
  font-size: 14px;
  color: #636c7b;
}
.regiast,
.login {
  cursor: pointer;
}
.regiast:hover {
  color: #f25d8e !important;
}

.login:hover {
  color: #f25d8e !important;
}
.middle_line {
  margin: 0 4px;
  width: 1px;
  height: 12px;
  background-color: #636c7b;
  display: inline-block;
}
.container_order {
  display: flex;
  margin-left: 25px;
}
.order_icon {
  background-image: url("./img/order.png");
  width: 18px;
  height: 18px;
  margin-right: 4px;
  background-size: 100%;
  cursor: pointer;
}
.order_text {
  font-size: 14px;
  color: #636c7b;
  cursor: pointer;
}
.order_text:hover {
  color: #f25d8e;
}
.order_icon:hover {
  background-image: url("./img/selectorder.png");
  width: 18px;
  height: 18px;
  background-size: 100%;
}

/*********************************** button **********************************/

.showhome_switch_container {
  margin-top: 60px;
  width: 100%;
  height: 72px;
  padding-top: 16px;
  background-color: #fff;
}
.switch_container {
  margin: 0 auto;
  width: 239px;
  height: 56px;
  background-image: url("./img/bg1.png");
  background-size: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.swicth_btn_left,
.swicth_btn_right {
  position: absolute;
  font-size: 20px;
  width: 126px;
  height: 56px;
  text-align: center;
  line-height: 56px;
  background-image: url("./img/bj.png");
  background-size: 100%;
  color: #212121;
  font-weight: 700;
  cursor: pointer;
}
.swicth_btn_left {
  top: 0;
  left: 0;
}
.swicth_btn_right {
  top: 0;
  left: 111px;
}
.swicth_active {
  color: #bcbcbc;
  font-weight: 400;
}

/************************* footer **************************/
.vipShop_footer {
  height: 220px;
  padding-bottom: 40px;
  margin-top: 55px;
}
.footer_line {
  border-top: 1px solid #e5e9ef;
  width: 980px;
  margin: 0 auto 30px;
}
.footer_container {
  height: 100%;
  width: 1160px;
  margin: 0 auto;
  // border: 1px solid black;
}
.footer_container_ul {
  display: flex;
  margin-bottom: 30px;
}
.footer_container_ul > li {
  height: 112px;
  padding-right: 20px;
  width: 360px;
  border-right: 1px solid #e5e9ef;
}
.footer_ul_childone {
  width: 380px;
}
.footer_ul_childtwo {
  padding-left: 40px;
}
.footer_container_ul .footer_ul_childthree {
  width: 280px;
  padding-left: 40px;
}
.footer_container_ul > li > div {
  width: 120px;
  height: 14px;
  margin-bottom: 14px;
  display: inline-block;
}
.footer_container_ul > li .footer_li_title {
  width: 100%;
  margin-bottom: 22px;
  font-size: 14px;
  color: #99a2aa;
}
.footer_container_ul > li a {
  font-size: 14px;
  color: #222;
}

.footer_container_ul > li .li_div_img {
  display: flex;
  // width: 280px;
}
.footer_container_ul > li .li_div_img a {
  display: block;
  width: 80px;
  height: 80px;
  text-align: center;
}
.footer_container .footer_container_ul > li a:hover {
  color: #00a1d6;
}
.li_div_img em:hover {
  color: #00a1d6;
}
.footer_li_imgone,
.footer_li_imgtwo,
.footer_li_imgthree {
  // position: relative;
  margin-left: 11px;
  width: 60px;
  height: 60px;
  // background: url("./img/icons.png") no-repeat -1024px -194px;
  // background-image: url('./img/icons.png');
}
.footer_li_imgone {
  background: url("./img/icons.png") no-repeat -1024px -194px;
}
.footer_li_imgtwo {
  background: url("./img/icons.png") no-repeat -1024px -322px;
}
.footer_li_imgthree {
  background: url("./img/icons.png") no-repeat -1024px -66px;
}
</style>
